<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mooj</title>
<script type="text/javascript" src="mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="mootools-1.2.1-more-nc.js"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript" src="mooj.js"></script>
<script type="text/javascript" src="site.js"></script>
<script type="text/javascript">
$(document).addEvent('domready', function(){
	$('ex-7-1-1').appendText(' Ready!');
});

window.load(function(){
	$('ex-7-4-2').appendText(' Load!');
});

window.unload(function(){
	alert('unload!');
});

window.error(function(){
	(function(){
	$('ex-7-4-2').appendText(' Error!');
	}).delay(1000);
});
createError('yes!');
</script>
<link rel="stylesheet" type="text/css" href="moo-syntax.css" />
<link rel="stylesheet" type="text/css" href="mooj.css" />
</head>
<body>
<h1>Mooj</h1>
<p class="desc">jQuery-like syntax for Mootools.</p>
<p><strong>Note: This document is incomplete.</strong></p>

<h2>Core</h2>

<h3>Data Cache</h3>
<div id="ex-1-3" class="section">
	<h4>Example 1.3: data and removeData</h4>
	<div class="example-block">
		<div id="ex-1-3-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-1-3-1').data('key');</code></pre>
	<pre><code class="javascript">$('ex-1-3-1').data('key', 'value');</code></pre>
	<pre><code class="javascript">$('ex-1-3-1').removeData('key');</code></pre>
</div>

<h2>Selectors</h2>

<h3>Basics</h3>
<div class="section">
	<p>No need. Already in Mootools.</p>
</div>

<h3>Hierarchy</h3>
<div class="section">
	<p>No need. Already in Mootools.</p>
</div>

<h3>Basic Filters</h3>
<div class="section">
	<p>Coming soon.</p>
</div>

<h3>Content Filters</h3>
<div class="section">
	<p>Coming soon.</p>
</div>

<h3>Visibility Filters</h3>
<div class="section">
	<p>Coming soon.</p>
</div>

<h3>Attribute Filters</h3>
<div class="section">
	<p>No need. Already in Mootools.</p>
</div>

<h3>Child Filters</h3>
<div class="section">
	<p>No need. Already in Mootools.</p>
</div>

<h3>Forms</h3>
<div class="section">
	<p>Coming soon.</p>
</div>

<h3>Form Filters</h3>
<div id="ex-2-9" class="section">
	<h4>Example 2.9: :enabled, :disabled, :checked, :selected</h4>
	<div class="example-block">
		<input type="text" id="ex-2-9-1" value="Example text" />
		<input type="text" id="ex-2-9-2" value="Example text (disabled)" disabled="disabled" />
		<input type="checkbox" id="ex-2-9-3" />
		<select id="ex-2-9-4">
			<option>A</option>
			<option>B</option>
		</select>
	</div>
	<pre><code class="javascript">$$('#ex-2-9-1:enabled');</code></pre>
	<pre><code class="javascript">$$('#ex-2-9-2:enabled');</code></pre>
	<pre><code class="javascript">$$('#ex-2-9-1:disabled');</code></pre>
	<pre><code class="javascript">$$('#ex-2-9-2:disabled');</code></pre>
	<pre><code class="javascript">$$('#ex-2-9-3:checked');</code></pre>
	<pre><code class="javascript">$$('#ex-2-9-4 :selected')[0].text;</code></pre>
</div>

<h2>Attributes</h2>

<h3>Attr</h3>
<div id="ex-3-1" class="section">
	<h4>Example 3.1: attr and removeAttr</h4>
	<div class="example-block">
		<div id="ex-3-1-1" title="test">Example text with a title attribute</div>
	</div>
	<pre><code class="javascript">$('ex-3-1-1').attr('title');</code></pre>
	<pre><code class="javascript">$('ex-3-1-1').attr('title', 'wow');</code></pre>
	<pre><code class="javascript">$('ex-3-1-1').attr({'title': 'great'});</code></pre>
	<pre><code class="javascript">$('ex-3-1-1').attr('title', function(){
	return 'ID = '+this.id;
});</code></pre>
	<pre><code class="javascript">$('ex-3-1-1').removeAttr('title');</code></pre>
</div>

<h3>Class</h3>
<div class="section">
	<p>No need. Already in Mootools.</p>
</div>

<h3>HTML</h3>
<div id="ex-3-3" class="section">
	<h4>Example 3.3: html</h4>
	<div class="example-block">
		<div id="ex-3-3-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-3-3-1').html();</code></pre>
	<pre><code class="javascript">$('ex-3-3-1').html('Example text with &lt;strong&gt;some HTML&lt;/strong&gt;');</code></pre>
</div>

<h3>Text</h3>
<div id="ex-3-4" class="section">
	<h4>Example 3.4: text</h4>
	<div class="example-block">
		<div id="ex-3-4-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-3-4-1').text();</code></pre>
	<pre><code class="javascript">$('ex-3-4-1').text('Example text with more text');</code></pre>
</div>

<h3>Value</h3>
<div id="ex-3-5" class="section">
	<h4>Example 3.5: val</h4>
	<div class="example-block">
		<input id="ex-3-5-1" value="Example input" />
	</div>
	<pre><code class="javascript">$('ex-3-5-1').val();</code></pre>
	<pre><code class="javascript">$('ex-3-5-1').val('Example input with more text');</code></pre>
</div>

<h2>Traversing</h2>

<h3>Filtering</h3>
<div id="ex-4-1" class="section">
	<h4>Example 4.1: is</h4>
	<div class="example-block">
		<div id="ex-4-1-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-4-1-1').is('input');</code></pre>
	<pre><code class="javascript">$('ex-4-1-1').is('div#ex-6-1');</code></pre>
</div>

<h3>Finding</h3>
<div id="ex-4-2" class="section">
	<h4>Example 4.2: children, find, next*, prev* and siblings</h4>
	<div class="example-block">
		<div id="ex-4-2-1">Example text with <em>emphasized</em> <em class="test">children</em> and <strong class="test">strong</strong> <strong>children</strong></div>
	</div>
	<pre><code class="javascript">$('ex-4-2-1').children();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('em');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('span');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').find('.test');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('em.test').next();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('em.test').nextAll();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('em.test').next(':not(.test)');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('em.test').nextAll(':not(.test)');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('strong.test').prev();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('strong.test').prevAll();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('strong.test').prev(':not(.test)');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('strong.test').prevAll(':not(.test)');</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('strong.test').siblings();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('.test').siblings();</code></pre>
	<pre><code class="javascript">$('ex-4-2-1').children('em.test').siblings(':not(.test)');</code></pre>
</div>

<h2>Manipulation</h2>

<h3>Changing Contents</h3>
<div class="section">
	<p>No need. Same as HTML and Text.</p>
</div>

<h3>Inserting Inside</h3>
<div id="ex-5-2" class="section">
	<h4>Example 5.2: append* and prepend*</h4>
	<div class="example-block">
		<div id="ex-5-2-1">Example text</div>
		<strong id="ex-5-2-2">Another strong text</strong>
	</div>
	<pre><code class="javascript">$('ex-5-2-1').append(new Element('strong', {'text': ' strong text'}));</code></pre>
	<pre><code class="javascript">$('ex-5-2-1').append(' &lt;strong&gt;strong text&lt;/strong&gt;');</code></pre>
	<pre><code class="javascript">$('ex-5-2-1').append(' with more text');</code></pre>
	<pre><code class="javascript">$('ex-5-2-2').appendTo('ex-5-2-1');</code></pre>
	<pre><code class="javascript">$('ex-5-2-1').prepend(new Element('strong', {'text': 'Strong text '}));</code></pre>
	<pre><code class="javascript">$('ex-5-2-1').prepend('&lt;strong&gt;Strong text&lt;/strong&gt; ');</code></pre>
	<pre><code class="javascript">$('ex-5-2-1').prepend('More text with ');</code></pre>
	<pre><code class="javascript">$('ex-5-2-2').prependTo('ex-5-2-1');</code></pre>
</div>

<h3>Inserting Outside</h3>
<div id="ex-5-3" class="section">
	<h4>Example 5.3: *after and *before</h4>
	<div class="example-block">
		<div id="ex-5-3-1">Example text</div>
		<strong id="ex-5-3-2">Another strong text</strong>
	</div>
	<pre><code class="javascript">$('ex-5-3-1').after(new Element('strong', {'text': ' strong text'}));</code></pre>
	<pre><code class="javascript">$('ex-5-3-1').insertAfter('ex-5-3-2');</code></pre>
	<pre><code class="javascript">$('ex-5-3-1').before(new Element('strong', {'text': ' strong text'}));</code></pre>
	<pre><code class="javascript">$('ex-5-3-2')._insertBefore('ex-5-3-1');</code></pre>
	<pre><code class="javascript">$('ex-5-3-1')._insertBefore('ex-5-3-2');</code></pre>
</div>

<h3>Inserting Around</h3>
<div id="ex-5-4" class="section">
	<h4>Example 5.4: wrap*</h4>
	<div class="example-block">
		<div id="ex-5-4-1" class="ex-5-4-1">Example <em>emphasized text</em></div>
		<div class="ex-5-4-1">Another Example text</div>
	</div>
	<pre><code class="javascript">$('ex-5-4-1').wrap(new Element('div'));</code></pre>
	<pre><code class="javascript">$$('.ex-5-4-1').wrapAll(new Element('div'));</code></pre>
	<pre><code class="javascript">$('ex-5-4-1').wrapInner(new Element('strong'));</code></pre>
</div>

<h3>Replacing</h3>
<div id="ex-5-5" class="section">
	<h4>Example 5.5: replace*</h4>
	<div class="example-block">
		<div id="ex-5-5-1" class="ex-5-5-1">Example <em>emphasized text</em></div>
		<div class="ex-5-5-1">Another Example text</div>
		<div id="ex-5-5-2">Yet Another Example text</div>
	</div>
	<pre><code class="javascript">$('ex-5-5-1').replaceWith(new Element('div', {'text': 'Example text'}));</code></pre>
	<pre><code class="javascript">$('ex-5-5-2').replaceAll($('ex-5-5-1'));</code></pre>
	<pre><code class="javascript">$('ex-5-5-2').replaceAll('div.ex-5-5-1');</code></pre>
	<pre><code class="javascript">new Element('div', {'text': 'New text'}).replaceAll('div.ex-5-5-1');</code></pre>
</div>

<h3>Removing</h3>
<div id="ex-5-6" class="section">
	<p>Note: <code>empty()</code> is already in Mootools.</p>
	<h4>Example 5.6: remove</h4>
	<div class="example-block">
		<div id="ex-5-6-1" class="first">Example text</div>
		<div class="ex-5-6-1">Another example text</div>
		<div class="ex-5-6-1 remove">Another example text</div>
	</div>
	<pre><code class="javascript">$('ex-5-6-1').remove();</code></pre>
	<pre><code class="javascript">$('ex-5-6-1').remove('.first');</code></pre>
	<pre><code class="javascript">$('ex-5-6-1').remove('.no-first');</code></pre>
	<pre><code class="javascript">$$('.ex-5-6-1').remove();</code></pre>
	<pre><code class="javascript">$$('.ex-5-6-1').remove('.remove');</code></pre>
	<pre><code class="javascript">$$('.ex-5-6-1').remove('.no-remove');</code></pre>
</div>

<h3>Copying</h3>
<div class="section">
	<p>No need. Already in Mootools.</p>
</div>

<h2>CSS</h2>

<h3>CSS</h3>
<div id="ex-6-1" class="section">
	<h4>Example 6.1: css</h4>
	<div class="example-block">
		<div id="ex-6-1-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-6-1-1').css('font-size');</code></pre>
	<pre><code class="javascript">$('ex-6-1-1').css('font-size', 20);</code></pre>
	<pre><code class="javascript">$('ex-6-1-1').css({ 'font-size': 30, 'font-weight': 'bold' });</code></pre>
</div>

<h3>Positioning</h3>
<div id="ex-6-2" class="section">
	<h4>Example 6.2: offset, position and scroll*</h4>
	<div class="example-block">
		<div id="ex-6-2-1" style="position: relative; padding: 10px; height: 100px; overflow: auto;">Example text
		<div id="ex-6-2-2" style="height: 200px; width: 200%;">Some more text</div>
		</div>
	</div>
	<pre><code class="javascript">$('ex-6-2-1').offset();</code></pre>
	<pre><code class="javascript">$('ex-6-2-2').offset();</code></pre>
	<pre><code class="javascript">$('ex-6-2-2').position();</code></pre>
	<pre><code class="javascript">$('ex-6-2-1')._scrollTop();</code></pre>
	<pre><code class="javascript">$('ex-6-2-1')._scrollTop(30);</code></pre>
	<pre><code class="javascript">$('ex-6-2-1')._scrollLeft();</code></pre>
	<pre><code class="javascript">$('ex-6-2-1')._scrollLeft(200);</code></pre>
</div>

<h3>Height and Width</h3>
<div id="ex-6-3" class="section">
	<h4>Example 6.3: offset, position and scroll*</h4>
	<div class="example-block">
		<div id="ex-6-3-1" style="border: 5px solid orange; margin: 5px; padding: 5px;">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-6-3-1').height();</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').height(40);</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').width();</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').width(400);</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').innerHeight();</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').innerWidth();</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').outerHeight();</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').outerWidth();</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').outerHeight(true);</code></pre>
	<pre><code class="javascript">$('ex-6-3-1').outerWidth(true);</code></pre>
</div>

<h2>Events</h2>

<h3>Page Load</h3>
<div id="ex-7-1" class="section">
	<h4>Example 7.1: ready</h4>
	<div class="example-block">
		<div id="ex-7-1-1">Example text</div>
	</div>
	<pre><code class="javascript">/*
// Already executed in this document. View source.
$(document).addEvent('domready', function(){
	$('ex-7-1-1').appendText(' Ready!');
});
*/</code></pre>
</div>

<h3>Event Handling</h3>
<div id="ex-7-2" class="section">
	<p>Note: <code class="javascript">triggerHandler()</code> is not implemented.</p>
	<h4>Example 7.2: bind, one, trigger and unbind</h4>
	<div class="example-block">
		<div id="ex-7-2-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-7-2-1').bind('click mouseout', click721 = function(){
	alert('click/mouseout!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-2-1').one('click', function(){
	alert('click!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-2-1').trigger('click');</code></pre>
	<pre><code class="javascript">$('ex-7-2-1').unbind('click', click721);</code></pre>
</div>

<h3>Interaction Helpers</h3>
<div id="ex-7-3" class="section">
	<p>Note: <code class="javascript">toggle()</code> is not implemented.</p>
	<h4>Example 7.3: hover</h4>
	<div class="example-block">
		<div id="ex-7-3-1">Example text</div>
	</div>
	<pre><code class="javascript">$('ex-7-3-1').hover(
	function(){
		this.text('Hover text');
	},
	function(){
		this.text('Unhover text');
	}
);</code></pre>
</div>

<h3>Event Helpers</h3>
<div id="ex-7-4" class="section">
	<h4>Example 7.4: blur, change, *click, error, focus, key*, *load, mouse*, resize, scroll, select, submit</h4>
	<div class="example-block">
		<input type="text" id="ex-7-4-1" value="Example input" />
		<div id="ex-7-4-2">Example text</div>
		<form id="ex-7-4-3" onSubmit="alert('submit!'); return false;"><input type="submit" value="Submit button" /></form>
	</div>
	<pre><code class="javascript">$('ex-7-4-1')._blur();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._blur(function(){
	alert('blur!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').change();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').change(function(){
	alert('change!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._click(); // only for input elements</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._click(function(){
	alert('_click!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').click(); // for all other non-input elements</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').click(function(){
	alert('click!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').dblclick();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').dblclick(function(){
	alert('dblclick!');
});</code></pre>
	<pre><code class="javascript">/*
// Already executed in this document. View source.
window.error(function(){
	(function(){
	$('ex-7-4-2').appendText(' Error!');
	}).delay(1000);
});
createError('yes!');
*/</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._focus();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._focus(function(){
	alert('_focus!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').keydown();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').keydown(function(){
	alert('keydown!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').keypress();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').keypress(function(){
	alert('keypress!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').keyup();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1').keyup(function(){
	alert('keyup!');
});</code></pre>
	<pre><code class="javascript">/*
// Already executed in this document. View source.
window.load(function(){
	$('ex-7-4-2').appendText(' Load!');
});
*/</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mousedown();</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mousedown(function(){
	alert('mousedown!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mousemove();</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mousemove(function(){
	alert('mousemove!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mouseout();</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mouseout(function(){
	alert('mouseout!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mouseover();</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mouseover(function(){
	alert('mouseover!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mouseup();</code></pre>
	<pre><code class="javascript">$('ex-7-4-2').mouseup(function(){
	alert('mouseup!');
});</code></pre>
	<pre><code class="javascript">window.resize(function(){
	alert('resize!');
});</code></pre>
	<pre><code class="javascript">$(document).scroll(function(){
	$('ex-7-4-2').appendText(' Scroll!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._select();</code></pre>
	<pre><code class="javascript">$('ex-7-4-1')._select(function(){
	alert('_select!');
});</code></pre>
	<pre><code class="javascript">$('ex-7-4-3')._submit();</code></pre>
	<pre><code class="javascript">$('ex-7-4-3')._submit(function(){
	alert('NEW _submit!');
});</code></pre>
	<pre><code class="javascript">/*
// Already executed in this document. View source.
// Close this page or reload.
window.unload(function(){
	alert('unload!');
});
*/</code></pre>
</div>

<h2>Effects</h2>

<h3>Basics</h3>
<div id="ex-8-1" class="section">
	<h4>Example 8.1: show, hide, toggle</h4>
	<div class="example-block">
		<div id="ex-8-1-1" style="display: none; background-color: yellow; border: 2px solid orange;">Example text 1</div>
		<div id="ex-8-1-2" style="background-color: yellow; border: 2px solid orange;">Example text 2</div>
	</div>
	<pre><code class="javascript">$('ex-8-1-1').show();</code></pre>
	<pre><code class="javascript">$('ex-8-1-1').show('slow');</code></pre>
	<pre><code class="javascript">$('ex-8-1-1').show(2000, function(){
	alert('show!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-1-2').hide();</code></pre>
	<pre><code class="javascript">$('ex-8-1-2').hide('slow');</code></pre>
	<pre><code class="javascript">$('ex-8-1-2').hide(2000, function(){
	alert('hide!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-1-1').toggle();</code></pre>
</div>

<h3>Sliding</h3>
<div id="ex-8-2" class="section">
	<h4>Example 8.2: slide*</h4>
	<div class="example-block">
		<div id="ex-8-2-1" style="display: none; background-color: yellow; border: 2px solid orange;">Example text 1</div>
		<div id="ex-8-2-2" style="background-color: yellow; border: 2px solid orange;">Example text 2</div>
	</div>
	<pre><code class="javascript">$('ex-8-2-1').slideDown();</code></pre>
	<pre><code class="javascript">$('ex-8-2-1').slideDown('slow');</code></pre>
	<pre><code class="javascript">$('ex-8-2-1').slideDown(2000, function(){
	alert('slideDown!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-2-2').slideUp();</code></pre>
	<pre><code class="javascript">$('ex-8-2-2').slideUp('slow');</code></pre>
	<pre><code class="javascript">$('ex-8-2-2').slideUp(2000, function(){
	alert('slideUp!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-2-2').slideToggle();</code></pre>
</div>

<h3>Fading</h3>
<div id="ex-8-3" class="section">
	<h4>Example 8.3: fade*</h4>
	<div class="example-block">
		<div id="ex-8-3-1" style="display: none; background-color: yellow; border: 2px solid orange;">Example text 1</div>
		<div id="ex-8-3-2" style="background-color: yellow; border: 2px solid orange;">Example text 2</div>
	</div>
	<pre><code class="javascript">$('ex-8-3-1').fadeIn();</code></pre>
	<pre><code class="javascript">$('ex-8-3-1').fadeIn('slow');</code></pre>
	<pre><code class="javascript">$('ex-8-3-1').fadeIn(2000, function(){
	alert('fadeIn!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-3-2').fadeOut();</code></pre>
	<pre><code class="javascript">$('ex-8-3-2').fadeOut('slow');</code></pre>
	<pre><code class="javascript">$('ex-8-3-2').fadeOut(2000, function(){
	alert('fadeOut!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-3-2').fadeTo(1000, 0.7);</code></pre>
	<pre><code class="javascript">$('ex-8-3-2').fadeTo(3000, 0.3, function(){
	alert('fadeTo');
});</code></pre>
</div>

<h3>Custom</h3>
<div id="ex-8-4" class="section">
	<p>Note: <code class="javascript">stop()</code>, <code class="javascript">queue()</code> and <code class="javascript">dequeue()</code> are not implemented.</p>
	<h4>Example 8.4: animate</h4>
	<div class="example-block">
		<div id="ex-8-4-1">Example text 1</div>
	</div>
	<pre><code class="javascript">$('ex-8-4-1').animate({
	width: 200,
	color: '#f00',
	'background-color': '#eee'
});</code></pre>
	<pre><code class="javascript">$('ex-8-4-1').animate({
	height: 150,
	color: '#0f0',
	'background-color': '#333'
}, 2000);</code></pre>
	<pre><code class="javascript">$('ex-8-4-1').animate({
	'margin-left': 200,
	color: '#00f',
	'background-color': '#aaa'
}, 'slow', 'elastic:out');</code></pre>
	<pre><code class="javascript">$('ex-8-4-1').animate({
	'margin-top': 200,
	color: '#0ff',
	'background-color': '#fff'
}, 3000, 'bounce:out', function(){
	alert('animate!');
});</code></pre>
	<pre><code class="javascript">$('ex-8-4-1').animate({
	'padding': 20,
	color: '#ff0',
	'background-color': '#000'
}, {
	duration: 3000,
	transition: 'circ:out'
});</code></pre>
</div>

<h2>Ajax</h2>

<h3>Ajax Requests</h3>
<div id="ex-9-1" class="section">
	<p>Note: <code class="javascript">getScript</code> is not implemented.</p>
	<h4>Example 9.1: ajax, load, get, getJSON, post</h4>
	<div class="example-block">
		<div id="ex-9-1-1">Example text</div>
	</div>
	<pre><code class="javascript">$.ajax({
	url: 'ajax/ajax.txt',
	success: function(data){
		$('ex-9-1-1').set('text', data);
	}
});</code></pre>
	<pre><code class="javascript">$('ex-9-1-1').load('ajax/load.txt');</code></pre>
	<pre><code class="javascript">$.get('ajax/get.txt', function(data){
	$('ex-9-1-1').set('text', data);
});</code></pre>
	<pre><code class="javascript">$.getJSON('ajax/json.txt', function(data){
	$('ex-9-1-1').set('text', data.text);
});</code></pre>
	<pre><code class="javascript">$.post('ajax/post.txt', function(data){
	$('ex-9-1-1').set('text', data);
});</code></pre>
</div>

<h3>Ajax Events</h3>
<div class="section">
	<p>Not implemented, yet.</p>
</div>

<h3>Misc</h3>
<div id="ex-9-3" class="section">
	<p>Note: <code class="javascript">serializeArray</code> is not implemented.</p>
	<h4>Example 9.3: serialize</h4>
	<div class="example-block">
		<form id="ex-9-3-1">
			<input type="text" name="test-1" value="1" />
			<input type="text" name="test-2" value="2" />
		</form>
	</div>
	<pre><code class="javascript">$('ex-9-3-1').serialize();</code></pre>
</div>

<div id="debug">
<div id="debug-log"></div>
<div id="debug-foot">
<button id="debug-toggle">toggle</button><button id="debug-clear">clear</button>
</div>
</div>

</body>
</html>